<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="dist/style.css" />
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <!-- 顶部搜索 -->
      <section>
        <i class="fa fa-home" aria-hidden="true"></i>
        <div class="input">
          <i class="fa fa-search" aria-hidden="true"></i>
          <input type="text" placeholder="搜索商品名称" />
        </div>
        <div class="user">
          <i class="fa fa-user" aria-hidden="true"></i>
        </div>
      </section>
      <!-- 顶部搜索end -->

      <!-- 导航 -->
      <nav>
        <div class="links">
          <a href="" class="active">电视</a>
          <a href="">手机</a>
          <a href="">电影</a>
          <a href="">游戏</a>
          <a href="">汽车</a>
          <a href="">游戏</a>
        </div>
        <div class="icon">
          <i class="fa fa-weibo" aria-hidden="true"></i>
        </div>
      </nav>
      <!-- 导航end -->
    </header>
    <main>
      <div class="slide">
        <img src="./images/mi.jpg" alt="" />
      </div>
      <div class="category">
        <a href=""><img src="./images/c1.png" alt="" /></a>
        <a href=""><img src="./images/c2.webp" alt="" /></a>
        <a href=""><img src="./images/c3.webp" alt="" /></a>
        <a href=""><img src="./images/c4.webp" alt="" /></a>
        <a href=""><img src="./images/c5.webp" alt="" /></a>
        <a href=""><img src="./images/c6.webp" alt="" /></a>
        <a href=""><img src="./images/c3.webp" alt="" /></a>
        <a href=""><img src="./images/c4.webp" alt="" /></a>
        <a href=""><img src="./images/c2.webp" alt="" /></a>
        <a href=""><img src="./images/c5.webp" alt="" /></a>
      </div>

      <div class="hot">
        <a href=""><img src="images/h1.webp" alt="" /></a>
        <a href=""><img src="images/h2.webp" alt="" /></a>
        <a href=""><img src="images/h3.webp" alt="" /></a>
      </div>

      <div class="ad">
        <a href=""><img src="images/a1.webp" alt="" /></a>
        <a href=""><img src="images/a2.webp" alt="" /></a>
      </div>

      <div class="goods">
        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米10 Pro</h3>
          <div class="info">骁龙865 / 50倍变焦</div>
          <div class="price">
            4999
            <span>起</span>
          </div>

          <div class="cart">立即购买</div>
        </a>

        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米10 Pro</h3>
          <div class="info">骁龙865 / 50倍变焦</div>
          <div class="price">
            4999
            <span>起</span>
          </div>
          <div class="cart">立即购买</div>
        </a>
        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米10 Pro</h3>
          <div class="info">骁龙865 / 50倍变焦</div>
          <div class="price">
            4999
            <span>起</span>
          </div>
          <div class="cart">立即购买</div>
        </a>
        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米10 Pro</h3>
          <div class="info">骁龙865 / 50倍变焦</div>
          <div class="price">
            4999
            <span>起</span>
          </div>
          <div class="cart">立即购买</div>
        </a>
        <a href="">
          <div class="preview">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h3>小米10 Pro</h3>
          <div class="info">骁龙865 / 50倍变焦</div>
          <div class="price">
            4999
            <span>起</span>
          </div>
          <div class="cart">立即购买</div>
        </a>
      </div>
    </main>
    <footer>
      <a href="" class="active">
        <i class="fa fa-home" aria-hidden="true"></i>
        首页
      </a>
      <a href="">
        <i class="fa fa-weibo" aria-hidden="true"></i>
        游戏
      </a>
      <a href="">
        <i class="fa fa-google" aria-hidden="true"></i>
        电影
      </a>
      <a href="">
        <i class="fa fa-facebook" aria-hidden="true"></i>
        小说
      </a>
      <a href="">
        <i class="fa fa-yahoo" aria-hidden="true"></i>
        游戏
      </a>
    </footer>
  </body>
</html>
